<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<?php include APPPATH.'/views/user_group2/header.php' ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
   <section id='body'>
    <div class="body-container" >
        <!-- Upload Avatar Form -->
        <form class='fill-in-form no-margin' method='post' id="avatar-upload" action="<?php echo site_url().'/user_group2/account/upload_avatar'?> " 
                           enctype="multipart/form-data" target="upload-target" onsubmit='StartUpload();'>
            <ol>
                <div class="head">Profile: </div>
                <li>
                <div class="upload-file" style="cursor:pointer">
                    <image id="avatar-image" src="<?php echo image_url().'no-avatar.png'?>" class="avatar"/>
                    <span>Click here to upload your image</span>
                </div>
                <input id="upload-file" class="hidden" type="file" name="avatar" />
                </li>
            </ol>
        </form>
        <iframe id="upload-target" name="upload-target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
        <!-- End Upload Avatar Form -->
        
        <!-- Main form -->
        <form id="main-form" class="fill-in-form no-margin" action="<?php echo site_url().'/user_group2/account/update_user_information'?>"
              method="POST"
              >
            <!--Hidden fields -->
            <input id='file_url' name='AvatarLink' type='text' value="<?php echo image_url().'no-avatar.png'?>" style='display:none'/>
            
            <ol>
                <!------ Name Section !-->
                <li>
                    <input class="text" type="text" placeholder="* Company Name" name="ComName" /> <span id="ComName-Error" class="error"></span>
                </li>
                <div class="hr"></div>
                <!---- <div class="head">Contact:</div>
                <div class="tab"> 
                    <div class="head">Location: 
                        <div id="add-location" class="margin-left add-btn" style='position:relative; left:8%'>+</div> 
                    </div> !--->
                    <!------Location-Address Section !-->
                    <!--<div id="location-section" class="tab">
                        <div class="head">Address 1: </div>
                        <li>
                            <input class="text margin-bottom" type="text" placeholder="Province" name="Province[]" /> 
                            <input class="text margin-bottom" type="text" placeholder="City" name="City[]" />
                        </li>
                        <li>
                            <input class="text margin-bottom" type="text" placeholder="District" name="District[]" /> 
                            <input class="text margin-bottom" type="text" placeholder="Address" name="Address[]" /> 
                        </li>
                    </div>
                    ---- Phone Section !
                    <div class="head">Phone: 
                        <div id="add-phone" class="margin-left add-btn" style='position:relative; left:10%'>+</div> 
                        <span style='position:relative; left:20%' id="phone-error" class="error"></span>
                    </div>
                    <li>
                        <div id='phone-section' class="tab">
                            <input class="text margin-bottom" type="number" placeholder="Phone" name="Phone[]" /> 
                        </div>
                    </li>-->
                    <!------ Website Section !-->
                    <div class="head">Website URL: 
                        <div id="add-website" class="margin-left add-btn" style='position:relative; left:5%; '>+</div>
                        <span style='position:relative; left:20%' id="web-error" class="error"></span>
                    </div>
                    <li>
                        <div id='website-section' class="tab">
                        <input class="text margin-bottom" type="text" placeholder="Website" name="Website[]" /> 
                        </div>
                    </li>
                <div class="hr"></div>
                <!------ Describtion Section !-->
                <div class="head">Describtion: </div>
                <li>
                    <textarea class="text" type="text" placeholder="Description" name="Describtion"></textarea>
                </li>

                <li>
                    <div id="main-form-submit-btn" class="submit-bt">Save</div>
                </li>
                </div>
            </ol>
        </form>
        
        <!-- End of main form -->
    </div>
    
    <?php include js_url(true).'validate_things.php'?>
    <script>
        /*Submit button event */
        $('#main-form-submit-btn').on('click', function(){     
            var pass = true;
            var ComName = $("input[name='ComName']").val();
            if(ComName === ""){
                $("#ComName-Error").text("The name can not be skipped");
                $("input[name='ComName']").attr("class","text-error");
                pass = false;
            }
            if(!checkAllWeb()){
                pass = false;
            }
            if(pass === true)
                 $('#main-form').submit();
        });
        /*End of submit button event */

        /*Check phone number */
//             var updatePhone = function(){$("input[name='Phone[]']").on('change',function() {
//                value = $(this).val();
//                value = value.toString();
//                if( (value.match(/\d/) && value.length >= 10) || value.length === 0){      
//                     if(value.length === 0)
//                         $(this).remove();
//                     $(this).attr("class","text margin-bottom");
//                }
//                else{
//                    $(this).attr("class","text-error margin-bottom");  
//                }
//                checkAllPhone();
//            });}
//             var checkAllPhone = function(){
//                 passPhone = true;
//                 $("input[name='Phone[]']").each(function(){
//                     value = $(this).val();
//                     if( (value.match(/\d/) && value.length >= 10) || value.length === 0){          
//
//                    }
//                    else{
//                        passPhone = false;
//                    }
//                 });
//                 if(passPhone === false){
//                     $("#phone-error").text("Some phone fields is incorrect!");
//                 }else{
//                     $("#phone-error").text("");
//                 }
//                 return passPhone;
//             }
//             updatePhone();      
        /* End of check phone number */


        var updateWeb = function(){$("input[name='Website[]']").on('change',function() {
            value = $(this).val();
            value = value.toString();
            if( is_valid_url(value) || value.length === 0){      
                 if(value.length === 0)
                     $(this).remove();
                 $(this).attr("class","text margin-bottom");
            }
            else{
                $(this).attr("class","text-error margin-bottom");  
            }
            checkAllWeb();
        });}
         var checkAllWeb = function(){
             passWeb = true;
             $("input[name='Website[]']").each(function(){
                 value = value = $(this).val();
                 if( is_valid_url(value) || value.length === 0){             

                }
                else{
                    passWeb = false;
                }
             });
             if(passWeb === false){
                 $("#web-error").text("Some website fields is incorrect!");
             }else{
                 $("#web-error").text("");
             }
             return passWeb;
         }
         updateWeb();      
        /*End of check website */

        /* Location, phone, website ids */
         var address = 2;
         /* Add more location */
         $('#add-location').on('click',function(){
            var html = '<div class="head">Address '+address+': </div>'
                     +'<li>'
                         +'<input class="text margin-bottom" type="text" placeholder="Province" name="Province[]" /> '
                         +'<input class="text margin-bottom" type="text" placeholder="City" name="City[]" />'
                     +'</li>'
                     +'<li>'
                         +'<input class="text margin-bottom" type="text" placeholder="District" name="District[]" /> '
                         +'<input class="text margin-bottom" type="text" placeholder="Address" name="Address[]" /> '
                     +'</li>'
            $('#location-section').append(html);
            address++;
        });

        /* Add more fone */
        $('#add-phone').on('click',function(){
            var html = '<input class="text margin-bottom" type="number" placeholder="Phone" name="Phone[]" /> ';
            $('#phone-section').append(html);
            updatePhone();
        });

        /*Add more website*/
        $('#add-website').on('click',function(){
            var html = '<input class="text margin-bottom" type="text" placeholder="Website" name="Website[]" /> ';
            $('#website-section').append(html);
            updateWeb();
        });


        /* Upload file btn click */
        $("div.upload-file").on('click',function(){
            $("input#upload-file").click();
        });

        $("input#upload-file").on('change',function(){
            if(!checkFileName($(this).val()))
            {
                $("div.upload-file span").text("Wrong type of file. Only PNG, JPG, JPEG and BMP is allowed");
                return;
            }
            $("form#avatar-upload").submit();
        });
         function StopUpload(Result){
             if(Result)
             {
                 var i = new Date().getTime();
                  $("#avatar-image").attr("src","<?php echo image_url()?>"+Result+"?random="+i);
                  $("div.upload-file span").text("Successfully uploaded");
                  $("input#file_url").val("<?php echo image_url()?>"+Result);
             }
            else{
                $("div.upload-file span").text("The uploading has been failed. Please try again");
            }
         }

         function StartUpload(){
             $("div.upload-file span").text("Uploading....");
         }

        /* End of upload file */
    </script>
    </section>

<?php include APPPATH.'/views/footer.php' ?>
